<template>
	<view class="home">
		<view class="swiper">
			<swiper indicator-dots circular autoplay>
				<swiper-item>
					<image mode="aspectFill" src="@/static/banner/banner1.jpg"></image>
				</swiper-item>
				<swiper-item>
					<image mode="aspectFill" src="@/static/banner/banner2.jpg"></image>
				</swiper-item>
				<swiper-item>
					<image mode="aspectFill" src="@/static/banner/banner3.jpg"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<scroll-view class="nav_left" scroll-y :class="{'gwc_bottom' : total.number > 0}">
			<view class="nav_item"
				v-for="(item, index) in order_list"
				:key="index"
				:class="{'active' : order_active === index}"
				@click="pageScroll(index)"
			>
				{{ item.title }}
			</view>
		</scroll-view>
		
		<scroll-view 
			class="order_main" 
			scroll-y 
			:class="{'gwc_bottom' : total.number > 0}"
			@scroll="mainScroll"
			:scroll-top="mainScrollTop"
			scroll-with-animation
		>
			<view class="order_item"
				v-for="(item, index) in order_list"
				:key="index"
				ref="order_item"
				@click="gotoDetails"
			>
				<view class="order_title" ref="order_title">{{ item.title }}</view>
				<view class="order_item_list">
					<view class="oil_box"
						v-for="(list, listIndex) in item.list"
						:key="listIndex"
					>
						<image class="oil_img" :src="list.img"></image>
						<view class="oil_name" >{{ list.name }}</view>
						<text class="oil_price" >￥{{ list.price }}</text>
						<view class="oil_number_box">
							<text class="jian" v-if="list.number != 0" @click="jian(index, listIndex)">-</text>
							<input type="number" class="oil_num" v-model="list.number" disabled v-if="list.number != 0"/>
							<text class="jia" @click="jia(index, listIndex)">+</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<view class="gwc_box" v-if="total.number > 0">
			<view class="gwc_left">
				<view class="gwc_icon" @click="showTotalList">
					<uni-icons type="cart-filled" class="g_icon"></uni-icons>
					<text class="badge">{{ total.number }}</text>
				</view>
				<view class="total_text">
					共 ￥{{ total.price }}
				</view>
			</view>
			<view class="gwc_btn" @click="pushMessage">立即下单</view>
		</view>
		
		<uni-popup ref="popup" type="bottom" background-color="#fff">
			<view class="popup_main">
				<view class="total_list">
					<text>名称</text>
					<text>价格</text>
					<text>数量</text>
				</view>
				<scroll-view class="total_auto" scroll-y>
					<view class="total_list"
						v-for="item in total.list"
					>
						<text>{{item.name}}</text>
						<text>￥{{item.price}}</text>
						<text>{{item.number}}</text>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_list: [
					{
						title: '菜品1',
						list: [
							{
								img: require('@/static/menu/img1.jpg'),
								name: '菜品1-1',
								price: '18.00',
								number: 0
							},
							{
								img: require('@/static/menu/img1.jpg'),
								name: '菜品1-2',
								price: '17.00',
								number: 0
							},
							{
								img: require('@/static/menu/img1.jpg'),
								name: '菜品1-3',
								price: '17.00',
								number: 0
							}
						]
					},
					{
						title: '菜品2',
						list: [
							{
								img: require('@/static/menu/img1.jpg'),
								name: '菜品2-1',
								price: '18.00',
								number: 0
							},
							{
								img: require('@/static/menu/img1.jpg'),
								name: '菜品2-2',
								price: '17.00',
								number: 0
							},
							{
								img: require('@/static/menu/img1.jpg'),
								name: '菜品2-3',
								price: '21.00',
								number: 0
							},
							{
								img: require('@/static/menu/img1.jpg'),
								name: '菜品2-4',
								price: '14.00',
								number: 0
							},
							{
								img: require('@/static/menu/img1.jpg'),
								name: '菜品2-5',
								price: '27.00',
								number: 0
							},
						]
					},
					{
						title: '菜品3',
						list: [
							{
								img: require('@/static/menu/img1.jpg'),
								name: '菜品3-1',
								price: '28.00',
								number: 0
							},
							{
								img: require('@/static/menu/img1.jpg'),
								name: '菜品3-2',
								price: '27.00',
								number: 0
							},
							{
								img: require('@/static/menu/img1.jpg'),
								name: '菜品3-3',
								price: '17.00',
								number: 0
							},
							{
								img: require('@/static/menu/img1.jpg'),
								name: '菜品3-4',
								price: '17.00',
								number: 0
							},
						]
					},
					{
						title: '菜品4',
						list: [
							{
								img: require('@/static/menu/img1.jpg'),
								name: '菜品4-1',
								price: '12.00',
								number: 0
							},
							{
								img: require('@/static/menu/img1.jpg'),
								name: '菜品4-2',
								price: '11.00',
								number: 0
							},
							{
								img: require('@/static/menu/img1.jpg'),
								name: '菜品4-3',
								price: '16.00',
								number: 0
							},
							{
								img: require('@/static/menu/img1.jpg'),
								name: '菜品4-4',
								price: '17.00',
								number: 0
							},
							{
								img: require('@/static/menu/img1.jpg'),
								name: '菜品4-5',
								price: '17.00',
								number: 0
							},
						]
					},
					{
						title: '菜品5',
						list: [
							{
								img: require('@/static/menu/img1.jpg'),
								name: '菜品5-1',
								price: '19.00',
								number: 0
							},
							{
								img: require('@/static/menu/img1.jpg'),
								name: '菜品5-2',
								price: '15.00',
								number: 0
							},
							{
								img: require('@/static/menu/img1.jpg'),
								name: '菜品5-3',
								price: '17.00',
								number: 0
							},
							{
								img: require('@/static/menu/img1.jpg'),
								name: '菜品5-4',
								price: '17.00',
								number: 0
							},
							{
								img: require('@/static/menu/img1.jpg'),
								name: '菜品5-5',
								price: '22.00',
								number: 0
							},
							{
								img: require('@/static/menu/img1.jpg'),
								name: '菜品5-6',
								price: '20.00',
								number: 0
							},
							{
								img: require('@/static/menu/img1.jpg'),
								name: '菜品5-7',
								price: '19.00',
								number: 0
							},
							{
								img: require('@/static/menu/img1.jpg'),
								name: '菜品5-8',
								price: '18.00',
								number: 0
							},
						]
					},
				],
				order_active: 0,
				
				mainScrollTop: 0,
				scrollLock: false,
			}
		},
		computed: {
			//购物车价格数量计算
			total() {
				let json = {
					number: 0,
					price: 0,
					list: []
				}
				this.order_list.forEach(item => {
					item.list.forEach(list => {
						json.number += list.number
						json.price += parseFloat(list.price) * list.number
						if(list.number > 0){
							json.list.push({
								name: list.name,
								number: list.number,
								price: parseFloat(list.price) * list.number
							})
						}
					})
				})
				return json
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			var appid = plus.runtime.appid;
			console.log('应用的 appid 为：' + appid);
			// #endif
			console.log('onload了')
		},
		methods: {
			gotoDetails() {
				uni.navigateTo({
					url: '../details/details'
				})
			},
			jia(index, itemIndex) {
				console.log('点击了加')
				//拷贝一份再操作 防止vue无法识别数组变化
				let newOrderListArr = JSON.parse(JSON.stringify(this.order_list))
				newOrderListArr[index].list[itemIndex].number += 1
				this.order_list = newOrderListArr
			},
			jian(index, itemIndex) {
				console.log('点击了减')
				//拷贝一份再操作 防止vue无法识别数组变化
				let newOrderListArr = JSON.parse(JSON.stringify(this.order_list))
				newOrderListArr[index].list[itemIndex].number -= 1
				this.order_list = newOrderListArr
			},
			//点击购物车打开弹窗
			showTotalList() {
				this.$refs.popup.open()
			},
			//监听菜单内容滚动
			mainScroll(event) {
				let scrollTop = event.detail.scrollTop
				let itemHeight = 0
				
				const query = uni.createSelectorQuery().in(this)
				query.selectAll('.order_item').boundingClientRect(order_item => {
					order_item.forEach((item, index) => {
						let y = item.y
						let h = item.height
						itemHeight += h
						let actIndex = (index + 1) > this.order_list.length ? this.order_list.length : (index + 1)
						
						if(scrollTop + 10 > itemHeight){	
							//2-n项
							this.order_active = actIndex
						}else{
							if(index === 0 && scrollTop < h){
								this.order_active = 0
							}
						}
					})
				}).exec()
			},
			//点击滚动
			pageScroll(menu_index) {
				if(this.scrollLock){//滚动期间上锁
					return
				}
				
				this.scrollLock = true
				const query = uni.createSelectorQuery().in(this)
				query.selectAll('.order_item').boundingClientRect(order_item => {
					let scrollTop = 0
					order_item.forEach((item, index) => {
						if(menu_index == index){
							this.mainScrollTop = scrollTop
						}
						
						scrollTop += item.height
					})
				}).exec()
			
				//active class设置
				this.order_active = menu_index
				setTimeout(() => {
					this.scrollLock = false	//滚动动画结束才能点击
				}, 300)
			},
			
			//消息推送例子
			pushMessage() {
				console.log('您点击了立即下单')
				// #ifdef APP-PLUS
				//发起一条消息推送
				plus.push.createMessage('点击查看消息内容', {
					url: '/pages/my/my'
				}, {
					title: '您收到一条订单信息'
				})
				
				//点击消息推送
				plus.push.addEventListener('click', (message) => {
					console.log(message)
					let { url } = message.payload
					uni.switchTab({
						url
					})
				})
				// #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home{
		position: relative;
		height: 100%;
		overflow: hidden;
	}
	
	.swiper{
		position: absolute;
		left: 0;
		right: 0;
		height: 260rpx;
		
		swiper{
			height: 260rpx;
		}
		image{
			display: block;
			width: 100%;
			height: 100%;
		}
	}
	
	.nav_left{
		position: absolute;
		left: 0;
		top: 260rpx;
		width: 200rpx;
		bottom: 0;
		background-color: #F8F8F8;
		
		.nav_item{
			display: flex;
			width: 100%;
			height: 120rpx;
			justify-content: center;
			align-items: center;
			position: relative;
			font-size: 32rpx;
		}
		.nav_item.active{
			background-color: #FFFFFF;
			color: $active-color;
			font-weight: bold;
			
			&::before{
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 8rpx;
				bottom: 0;
				background-color: $active-color;
			}
		}
	}
	
	.order_main{
		position: absolute;
		top: 260rpx;
		left: 200rpx;
		bottom: 0;
		right: 0;
		box-sizing: border-box;
		padding: 20rpx;
		width: auto;
		
		.order_item{
			.order_title{
				border-bottom: 1px solid #eee;
				font-size: 32rpx;
				line-height: 80rpx;
				position: relative;
				padding: 0 20rpx;
				
				&::before{
					content: "";
					position: absolute;
					top: 50%;
					left: 0;
					height: 32rpx;
					width: 4rpx;
					transform: translateY(-50%);
					background-color: $active-color;
				}
			}
			
			.order_item_list{
				.oil_box{
					border-bottom: 1px solid #eee;
					padding: 20rpx;
					overflow: hidden;
					position: relative;
					
					.oil_img{
						width: 140rpx;
						height: 140rpx;
						float: left;
						padding-right: 20rpx;
					}
					
					.oil_name{
						font-size: 32rpx;
						padding-bottom: 40rpx;
					}
					
					.oil_price{
						font-size: 30rpx;
						color: $active-color;
					}
					
					.oil_number_box{
						position: absolute;
						right: 0;
						bottom: 60rpx;
						display: flex;
						text-align: center;
						
						.jian,.jia{
							width: 50rpx;
							height: 50rpx;
							border-radius: 50%;
							overflow: hidden;
							border: 1px solid transparent;
							font-size: 40rpx;
							line-height: 1.1;
						}
						
						.oil_num{
							width: 80rpx;
							height: 50rpx;
						}
						
						.jia{
							background-color: $active-color;
							color: #fff;
							cursor: pointer;
						}
						
						.jian{
							border-color: $active-color;
							color: $active-color;
							cursor: pointer;
						}
					}
				}
			}
		}
	}
	
	.gwc_bottom{
		bottom: 100rpx;
	}
	
	.gwc_box{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #d9d9d9;
		display: flex;
		
		.gwc_left{
			flex: 1;
			position: relative;
			padding-left: 150rpx;
			
			.gwc_icon{
				position: absolute;
				left: 30rpx;
				top: -20rpx;
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				background-color: #ccc;
				display: flex;
				justify-content: center;
				align-items: center;
				
				.g_icon,.uni-icons{
					font-size: 70rpx !important;
					color: #fff !important;
				}
				
				.badge{
					position: absolute;
					right: -10rpx;
					top: -10rpx;
					background-color: $active-color;
					color: #fff;
					border-radius: 50%;
					min-width: 40rpx;
					height: 40rpx;
					line-height: 40rpx;
					box-sizing: border-box;
					padding: 0 10rpx;
					text-align: center;
					font-size: 24rpx;
				}
			}
			
			.total_text{
				line-height: 100rpx;
				font-size: 36rpx;
			}
		}
		
		.gwc_btn{
			padding: 0 40rpx;
			line-height: 100rpx;
			background-color: $active-color;
			color: #fff;
			font-size: 40rpx;
		}
	}
	
	.popup_main{
		padding-bottom: var(--window-bottom);
		
		.total_auto{
			max-height: 420rpx;
			overflow-y: auto;
		}
		
		.total_list{
			padding: 20rpx;
			border-bottom: 1px solid #eee;
			display: flex;
			
			text{
				width: 35%;
				
				&:first-child{
					width: 50%;
				}
				
				&:last-child{
					width: 15%;
				}
			}
			
			&:last-child{
				border-bottom: 0;
			}
		}
	}
	
</style>
